<%@ include file="../common/IncludeTop.jsp"%>
<script>
	let xhr;
	function checkUsername(){
		let username = document.getElementById("username").value;
		if(username.trim()=="")
		{
			let msg = document.getElementById('usernameTips');
			msg.classList.remove('okmsg');
			msg.innerText = '';
		}
		else
		{
			xhr = new XMLHttpRequest();
			xhr.onreadystatechange = process;
			xhr.open("GET", "usernameExist?username="+username, true);
			xhr.send(null);
		}
	}
	function process(){
		if(xhr.readyState == 4){
			if(xhr.status == 200){
				let responseInfo = xhr.responseText;
				let msg = document.getElementById('usernameTips');
				if(responseInfo == "Exist"){
					msg.classList.remove('errormsg');
					msg.classList.add('okmsg');
					msg.innerText = 'User name exist';
				}else if(responseInfo == "Not Exist"){

					msg.classList.remove('okmsg');
					msg.classList.add('errormsg');
					msg.innerText = 'User name does not exist';
				}
			}
		}
	}
</script>

<div id="Content">
		<ul class="messages">
			<li>${sessionScope.messageSignOn}</li>
		</ul>

<div id="Catalog">
	<form action="signOn" method="post">
		<p>Please enter your username and password.</p>
		<p>
			<tr>
				<td>Username:</td>
				<td><label>
					<input id="username" type="text" name="username" onblur="checkUsername();"/><br>
					<span id ="usernameTips"></span><br/>
				</label></td>
			</tr>

			<tr>
				<td>password:</td>
				<td><label>
					<input id="password" type="text" name="password"/><br>
					<br/>
				</label></td>
			</tr>

			<label>
				VerificationCode:
				<input type="text" name="vCode" size="5" maxlength="4"/>
			</label>
			<a href="signOn"><img border="0" src="verificationCode" name="checkcode" ></a>
		</p>
		<input type="submit" name="signon" value="Login" />
	</form>
		Need a user name and password?
	    <!--newAccountForm-->
	    <a href="newAccountForm">Register Now!</a>
</div>

<%@ include file="../common/IncludeBottom.jsp"%>

